<template>
	<div class="body4">
		<div class="container">

			<!-- 忘记密码 -->
			<div class="container-form container-signup">
				<el-form ref="registform" :model="registform" class="form" id="form5">
					<h2 class="form-title">找回密码</h2>
					<el-form-item>
						<el-input v-model="registform.mailbox" placeholder="Email"
							style="width: 280px; margin-bottom: 10px;"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input show-password v-model="registform.password" placeholder="New Password"
							style="width: 280px;margin-bottom: 10px;"></el-input>
					</el-form-item>
					<div style="position: relative;left:-48px;">
						<el-form-item>
							<el-input v-model="registform.emailvcode" placeholder="邮箱验证码" style="width:90%;"></el-input>
						</el-form-item>
						<el-button
							style="position: relative;left: 140px; top: -36px; width: 40%;height: 58%;background-color: #434343;border: #7e7e7e; color: #fff; cursor: pointer;font-size: 12px;"
							@click="forgetForEmailVcode()" v-if="!sending">发送验证码</el-button>
						<el-button
							style="position: relative;left: 140px; top: -36px; width: 40%;height: 58%;background-color: #434343;border: #7e7e7e; color: #fff; cursor: pointer;font-size: 12px;"
							v-else>{{count}}</el-button>
					</div>
					<el-button type="primary" class="btn" @click="forgetForNewPassword()">提交</el-button>
					<br />
					<a href="#" class="link" @click="jump('/login')">已有账号,立即登录</a>
				</el-form>
			</div>
			<!-- 叠加层部分 -->

		</div>
	</div>
</template>

<script scoped>
	import axios from 'axios'
	import {
		set
	} from 'vue'
	export default {
		data() {
			return {

				isShow: false,
				curl: "",
				key: "",
				form: {
					mailbox: "",
					password: "",
					verificationCode: ""
				},
				registform: {
					mailbox: "",
					password: "",
					emailvcode: ""
				},
				emailVcodeForm: {
					mailbox: "",
					emailvcode: ""
				},
				count: 60,
				timer: null,
				sending: false
			}
		},

		computed: {
			// 计算属性  
		},
		methods: {
			// 方法  
			signIn() {
				const container = document.querySelector(".container")
				container.classList.remove("panel-active")
			},
			signUp() {
				const container = document.querySelector(".container")
				container.classList.add("panel-active")
			},

			cimg() {
				this.key = Math.random();
				this.curl = 'http://45.145.75.2:8102/captcha/Vcode?key=' + this.key;
			},

			// 忘记密码后发送邮箱验证码
			forgetForEmailVcode() {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				this.count = 60
				if (this.registform.mailbox.trim().length === 0 || this.registform.password.trim().length === 0) {
					this.$message.warning("邮箱和密码必填项");
				} else {
					console.log("发送邮箱验证码")
					this.sending = true
					this.timer = setInterval(() => {
						this.count--
						if (this.count === 0) {
							this.sending = false
							clearInterval(this.timer)
						}
					}, 1000)
					axios.post("http://45.145.75.2:8102/userlogin/sendMailVcode", this.registform)
						.then(resq => {
							if (resq.data.code != 200) {
								this.$message({
									message: resq.data.message,
									type: 'error'
								});
							}
						}).catch(error => {
							// 请求失败，显示验证码发送失败
							this.$message.error(resp.data.message);
						});

				}


			},

			//重设密码
			forgetForNewPassword() {
				if (this.registform.mailbox.trim().length === 0 || this.registform.password.trim().length === 0 || this
					.registform.emailvcode.trim().length === 0) {
					this.$message.warning("请确保每一项都有填写");
				} else {

					axios.post("http://45.145.75.2:8102/userlogin/forgetPassWord", this.registform)
						.then(res => {

							//如果密码重设成功则跳转至登录页面
							if (200 === res.data.code) {

								this.$message({
									message: res.data.message,
									type: 'success'
								});
								this.$router.push('/loginEP');

							} else {
								//未成功
								this.$message({
									message: res.data.message,
									type: 'error'
								});

							}


						})
				}



			},
			showForm(formNumber) {
				this.activeForm = formNumber;
			},
			//路由跳转
			jump(url) {

				this.$router.push(url);


			}

		},
		mounted() {

		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.el-form-item {
		display: flex;
		width: 100%;
	}

	.body4 {
		display: flex;
		justify-content: center;
		align-items: center;

		height: 100vh;
		background-color: #5e5e5e;
		background: #e7e7e7 url('./image/server_img6.jpg') center no-repeat fixed;
		background-size: cover;
		/* 		background: #e7e7e7 url('image/index_bg.jpg') center no-repeat fixed;
		background-size: cover;
		backdrop-filter: blur(5px); */
	}

	.container {
		overflow: hidden;
		position: relative;

		height: 420px;
		width: 100%;
		max-width: 750px;
		opacity: 0.8;
		background-color: #171717;
		box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
		border-radius: 0.7rem;
	}

	/* 登录、注册框 通用部分*/
	.container-form {
		position: absolute;
		height: 100%;
		top: 0;

		transition: all 0.6s ease-in-out;
	}

	/* 登录框 - 默认层级 2 - 透明度 1*/
	.container-signin {
		left: 0;
		width: 50%;
		z-index: 2;
	}

	/* 注册框 - 默认层级 1- 透明度 0*/
	.container-signup {
		position: relative;
		left: 25%;

		width: 50%;
		z-index: 1;
	}

	.form {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 3rem;
		height: 100%;
		text-align: center;
		background-color: #171717;
	}

	.form-title {
		font-weight: 300;
		margin: 0;
		margin-bottom: 1.25rem;
		color: #fff;
	}

	.link {
		columns: #333;
		font-size: 0.9rem;
		margin: 1.5rem 0;
		text-decoration: none;
	}

	.input {
		width: 100%;
		background-color: #fff;
		padding: 0.9rem 0.9rem;
		margin: 0.5rem 0;
		border: none;
		outline: none;
	}

	.btn {
		background-color: #434343;
		border-radius: 5px;
		color: #e7e7e7;
		border: none;
		cursor: pointer;
		font-size: 0.8rem;
		font-weight: bold;
		letter-spacing: 0.1rem;
		padding: 0.9rem 4rem;
		text-transform: uppercase;
		transition: transform 80ms ease-in;
	}

	.form>.btn {
		margin-top: 1, 5rem;
	}

	.btn:active {
		transform: scale(0.9s);
	}

	/* 叠加层部分 */
	.container-overlay {
		overflow: hidden;

		position: absolute;
		top: 0;
		left: 50%;
		z-index: 100;

		height: 100%;
		width: 50%;

		transition: transform 0.6s ease-in-out;
	}

	.overlay {
		position: relative;
		left: -100%;

		width: 200%;
		height: 100%;

		background: url("image/index_bg.jpg") no-repeat center fixed;
		background-size: cover;
		transition: transform 0.6s ease-in-out;
		transform: translateX(0);
	}

	.overlay-panel {
		height: 100%;
		width: 50%;
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transform: translateX(0);
		transition: transform 0.6s ease-in-out;
	}

	.overlay-left {
		transform: translatex(-20%);
	}

	.overlay-right {
		right: 0;
		transform: translatex(0);
	}

	/* 设计激活时叠加层的位置 */
	.panel-active .overlay-left {
		transform: translateX(0);
	}

	.panel-active .container-overlay {
		transform: translateX(-100%);
	}

	.panel-active .overlay {
		transform: translateX(50%);
	}

	/* 设置激活时，登录注册层的位置和透明度 */
	.panel-active .container-signin {
		transform: translateX(100%);
	}

	.panel-active .container-signup {
		opacity: 1;
		Z-index: 5;
		transform: translateX(100%);
	}

	.link {
		columns: #333;
		font-size: 0.9rem;
		margin-top: 0px !important;
		margin-bottom: 5px !important;
		text-decoration: none;
		color: #fff;
	}
</style>